<template>
  <div class="out">
    <div class="bigTitle">留言</div>
    <div class="out_container">
      <div class="title">我的动态</div>
      <div class="message">
        <p>本站主题：个人博客</p>
        <p>name：影子</p>
        <p>欢迎在下方留言！</p>
        <div class="comment">
          <textarea cols="30" rows="10"></textarea>
          <button @click="send">发送</button>
          <ul ref="ul">
            <div style="width: 250px" v-model="date1">{{ date1 }}</div>
            <li>
              你的网站做的真棒！！！<a
                href="javascript:;"
                style="position: absolute; right: 280px; text-decoration: none"
                >删除</a
              >
            </li>
            <li>
              海阔凭鱼跃，天高任鸟飞<a
                href="javascript:;"
                style="position: absolute; right: 280px; text-decoration: none"
                >删除</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      date1: '', //预先定义第一个li的时间
      date2: "", //预先定义第二个li的时间
    };
  },
  mounted(){
    this.date1=this.formatDate(new Date(), "yyyy/MM/dd HH:mm:ss 星期w")
    console.log(this.date1)
  },
  methods: {
    send() {
      // 获取元素
      var text = document.querySelector("textarea");
      var ul = this.$refs.ul; //之前是通过上面这种方式获取ul节点，但是这样会获取到背景图片的ul
      console.log(ul);
      if (text.value == "") {
        alert("您没有留下任何信息");
      } else {
        //(1)创建元素
        var li = document.createElement("li");
        // 给元素添加样式
        li.style.overflow = "hidden";
        li.style.whiteSpace = "nowrap";
        li.style.textOverflow = "ellipsis";
        li.style.listStyleType = "circle"; //为啥这行无效，无法设置新增留言前面的实心
        li.style.fontSize = "18px";
        //(2)添加元素
        li.innerHTML =
          text.value +
          '<a href="javascript:;" style="position: absolute;right:280px;text-decoration: none;">删除</a>';
        ul.insertBefore(li, ul.children[0]);
        text.value = ""; //情况留言窗口数据

        //(3)删除操作开始(这个删除操作放在最外面不起作用)
        var as = document.querySelectorAll("a");
        for (var i = 0; i < as.length; i++) {
          as[i].onclick = function () {
            //点击a删除当前a所在的行（链接的爸爸） node.removeChild(child)
            //这个行(child)如何获取---this.parentNode
            ul.removeChild(this.parentNode);
          };
        }
      }
    },
    // 处理时间格式
    formatDate(time, str) {
      var obj = {
        yyyy: time.getFullYear(),
        yy: ("" + time.getFullYear()).slice(-2),
        M: time.getMonth() + 1,
        MM: ("0" + time.getMonth() + 1).slice(-2),
        d: time.getDate(),
        dd: ("0" + time.getDate()).slice(-2),
        H: time.getHours(),
        HH: ("0" + time.getHours()).slice(-2),
        h: time.getHours() % 12,
        hh: ("0" + (time.getHours() % 12)).slice(-2),
        m: time.getMinutes(),
        mm: ("0" + time.getMinutes()).slice(-2),
        s: time.getSeconds(),
        ss: ("0" + time.getSeconds()).slice(-2),
        w: ["日", "一", "二", "三", "四", "五", "六"][time.getDay()],
      };
      return str.replace(/([a-z]+)/ig,function(time){return obj[time]});
    },
  },
};
</script>

<style lang="less" scoped>
.out {
  position: relative;
  .bigTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 40px;
  }
  .out_container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 900px;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 20px;
    border-radius: 20px;
    /* 设置渐变色 */
    background: linear-gradient(
      to right,
      rgba(66, 12, 12, 0.4),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.2)
    );
    /* *****重点：使元素背景模糊化，backdrop-filter 是使透过该层的底部元素模糊化，值越大越模糊，注意区别于filter */
    backdrop-filter: blur(10px);
    /* filter是使该元素本身模糊化 */
    /* filter: blur(10px); */
    /* 设置上高光和左高光 */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    .title {
      font-size: 26px;
    }
    .message {
      margin-top: 10px;
      // margin-left: -550px;
      p {
        font-size: 18px;
      }
      .comment {
        textarea {
          background-color: rgba(188, 226, 231, 0.3);
          border: none;
          height: 60px;
          font-size: 18px;
          border-radius: 10px;
        }
        button {
          position: relative;
          margin-left: 5px;
          border: none;
          background-color: rgba(188, 226, 231, 0.3);
          width: 50px;
          height: 30px;
          border-radius: 10px;
        }
        ul {
          width: 250px;
          li {
            height: 30px;
            line-height: 30px;
            padding-left: 8px;
            border-radius: 15px;
            a:hover {
              display: inline-block;
              width: 42px;
              padding-left: 11px;
              border-radius: 15px;
              background-color: rgba(243, 236, 236, 0.3);
            }
          }
          li:hover {
            background-color: rgba(243, 236, 236, 0.3);
          }
        }
      }
    }
  }
  /* 设置那几个球 */
  .circle1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 180px;
    left: 180px;
    background: rgba(186, 248, 227, 0.7);
    z-index: -99;
  }
  .circle2 {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 430px;
    left: 400px;
    background: rgba(232, 250, 201, 0.7);
    z-index: -99;
  }
  .circle3 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 250px;
    left: 1100px;
    background: rgba(149, 200, 241, 0.7);
    z-index: -99;
  }
}
</style>